<template>
  <div>
    <el-carousel height="550px">
      <el-carousel-item v-for="item in url" :key="item">
        <el-image style="width: 100%; height: 100%" :src="item" fit="fill" />
      </el-carousel-item>
    </el-carousel>
    <div class="title">热门电影</div>
    <div class="movieList">
      <div
        class="item"
        v-for="(item, index) in movieListData"
        :key="index"
        @click="todetail(item.id)"
      >
        <el-image
          style="width: 100%; height: 100%"
          :src="item.imgUrl"
          fit="fill"
        />
        <div class="name">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { movieList } from "@/api/v2";
import { Try } from "@/utils";
import { useRouter } from "vue-router";
const router = useRouter();
const movieListData = ref([]);
const url = ref([
  "",
  "https://img0.baidu.com/it/u=3084733725,3572947667&fm=253&fmt=auto&app=120&f=JPEG?w=876&h=500",
  "https://img1.baidu.com/it/u=3060087749,3912305257&fm=253&fmt=auto&app=120&f=JPEG?w=607&h=389",
]);
const getmovie = () => {
  Try(async () => {
    const res = await movieList();
    console.log(res);
    if (res.code === 200) {
      movieListData.value = res.data;
    }
  });
};
const todetail = (id) => {
  router.push({
    path: "/detail",
    query: { id },
  });
};
onMounted(() => {
  getmovie();
});
</script>

<style scoped>
.title {
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}
.movieList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 10px;
}
.item {
  width: 170px;
  height: 270rpx;
  box-shadow: 0px 0px 8px #888888;
  border-radius: 20rpx;
  position: relative;
}
.name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  line-height: 30px;
}
.item:hover .name {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-weight: 600;
}
</style>
